import {
  getUserList,
  serviceError,
  userError,
  UserListInter,
} from '@/service/user';
import http from '@/utils/service';
import React, { useEffect, useState } from 'react';
import { Link, useHistory, request } from 'umi';
import './List.less';

export default function List() {
  const [data, setData] = useState<UserListInter>({
    list: [],
  } as unknown as UserListInter);
  const listData = [1, 2, 3, 4, 5];
  const history = useHistory();
  const handleGoDetail = (id: number) => {
    history.push(`/user/detail/${id}`);
  };
  async function getData() {
    // const res = await getUserList();
    const res = await getUserList();
    // const res1 = await userError();
    // const res2 = await userError();
    setData(res);
  }
  // userError().then(res => userError().then(res => userError().then()))
  function openServiceError() {
    serviceError();
  }
  useEffect(() => {
    // request('/api/list', { method: 'post' }).then((res: any) =>
    //   console.log(res),
    // );
    // http.get('/list').then((res) => console.log(res));
    // async function getData() {
    //   const res = await getUserList();
    //   console.log('await 方法', res);
    // }
    getData();
    // getUserList().then((res) => console.log('普通方法', res));
    return () => {
      console.log('xxx');
    };
  }, []);
  return (
    <div>
      <h1>用户-普通列表</h1>
      <button onClick={openServiceError}>点击请求</button>
      <div className="list-wrapper">
        {/* 声明式导航 */}
        {/* {listData.map((item) => (
          <div className="list-item" key={item}>
            <Link to={`/user/detail/${item}`}>当年列表项的id为 {item}</Link>
          </div>
        ))} */}
        {/* 编程式导航 */}
        {data.list.map((item) => (
          <div className="list-item" key={item.id}>
            {' '}
            当年列表项的name为 {item.userName}
          </div>
        ))}
        {listData.map((item) => (
          <div
            id="ListItem"
            className="list-item"
            key={item}
            onClick={() => handleGoDetail(item)}
          >
            当年列表项的id为 {item}
          </div>
        ))}
      </div>
    </div>
  );
}
